<template>
	<view v-if="show" class="character-fixed-box">
		<view @click="showAllcharacter = !showAllcharacter" class="change-btn fr-ac">
			<view class="mr-10">
				景点导览
			</view>
			<up-icon name="arrow-up" size="16"></up-icon>
			<!-- <up-icon name="arrow-down" size="16"></up-icon> -->
	
			<!-- <up-icon name="fuzhi" customPrefix="custom-icon" size="16" :color="publicStyles['--gray-9']"></up-icon> -->
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick,
		watch
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useColorStore
	} from '@/store/color'
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	const props = defineProps({
		show:{
			default:false
		}
	})
	const emit = defineEmits(['change'])
	const showAllcharacter = ref(false)
	const character_list = ref([
		{
			name:'绅士',
			value:1,
		},
		{
			name:'可爱',
			value:2,
		},
		{
			name:'幽默',
			value:3,
		},
		{
			name:'智慧',
			value:4,
		}
	])
	const current = ref(0)
	const changeCharacter = (index)=>{
		current.value = index
		showAllcharacter.value = false
		emit('change',character_list.value[current.value])
	}
	onMounted(()=>{
		
	})
</script>

<style lang="scss">
	.character-fixed-box {
		position: fixed;
		top: 95px;
		right: 30rpx;
		width: fit-content;
		z-index: 990;
	
		.change-btn {
			box-sizing: border-box;
			padding: 10rpx 25rpx;
			background-color: #dff7f3;
			border-radius: 50rpx;
		}
	
		.label-box {
			border-radius: 8rpx;
			box-sizing: border-box;
			overflow: hidden;
			padding: 0 30rpx;
			background-color: #fff;
			box-shadow: 2rpx 2rpx 12rpx #ddd;
	
			.label-item {
				margin: 25rpx 0;
			}
		}
	}
	
</style>